<template>
  <div class="page-container">
    <div style="width: 100%; height: 100%">
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
// import { Snapline } from "@antv/x6-plugin-snapline";

export default {
  data() {
    return {
      graph: null,
    };
  },
  methods: {
    initGraph() {
      const container = document.getElementById("container");
      this.graph = new Graph({
        container: container,
        // width: container.offsetWidth,
        // height: container.offsetHeight,
        autoResize: true, // 自适应
        panning: true,  // 鼠标按下画布后移动时会拖拽画布，
        mousewheel: true, // 滚动鼠标滚轮会缩放画布。
        background: {
          color: "#F2F7FA",
        },

        grid: {
          visible: true,
          type: "doubleMesh",
          args: [
            {
              color: "#eee", // 主网格线颜色
              thickness: 1, // 主网格线宽度
            },
            {
              color: "#ddd", // 次网格线颜色
              thickness: 1, // 次网格线宽度
              factor: 4, // 主次网格线间隔
            },
          ],
        },
      });
      // 下面为画布增加对齐线功能，当移动的节点与其他节点对齐时，会自动出现对齐线，可以方便用户进行位置排版。
      //   this.graph.use(
      //     new Snapline({
      //       enabled: true,
      //     })
      //   );
    },
    showData() {
      const data = {
        nodes: [
          {
            id: "node1",
            shape: "rect",
            x: 40,
            y: 40,
            width: 100,
            height: 40,
            label: "hello",
            attrs: {
              // body 是选择器名称，选中的是 rect 元素
              body: {
                stroke: "#8f8f8f",
                strokeWidth: 1,
                fill: "#fff",
                rx: 6,
                ry: 6,
              },
            },
          },
          {
            id: "node2",
            shape: "rect",
            x: 160,
            y: 180,
            width: 100,
            height: 40,
            label: "world",
            attrs: {
              body: {
                stroke: "#8f8f8f",
                strokeWidth: 1,
                fill: "#fff",
                rx: 6,
                ry: 6,
              },
            },
          },
        ],
        edges: [
          {
            shape: "edge",
            source: "node1",
            target: "node2",
            label: "x6",
            attrs: {
              // line 是选择器名称，选中的边的 path 元素
              line: {
                stroke: "#8f8f8f",
                strokeWidth: 1,
              },
            },
          },
        ],
      };
      this.graph.fromJSON(data); // 渲染元素
      this.graph.centerContent(); // 居中显示
    },
  },
  mounted() {
    this.initGraph();
    this.showData();
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  #container {
    width: 800px;
    height: 600px;
  }
}
</style>
